<template>
  <div>
    <div
      class="uni-list-cell uni-list-cell-pd"
      v-for="(item, index) in items"
      :key="item.name"
    >
      <checkbox :checked="item.checked" @change="handleChange(item)" />
      <span>{{ item.price }}</span>
      <span>{{ item.name }}</span>
    </div>
    <div>总价格：{{ totalPrice }}</div>
  </div>
</template>

<script setup>
import { reactive, computed } from "vue";
const items = reactive([
  {
    name: "苹果",
    price: "10",
    checked: false,
  },
  {
    name: "香蕉",
    price: "20",
    checked: false,
  },
  {
    name: "橘子",
    price: "30",
    checked: false,
  },
  {
    name: "荔枝",
    price: "40",
    checked: false,
  },
]);
const handleChange = (item) => {
  alert(123);
  item.checked = !item.checked;
  consol.log(items);
};
const totalPrice = computed(() =>
  items.reduce((pre, next) => {
    if (next.checked) {
      pre += next.price;
    }
    return pre;
  }, 0)
);
</script>

<style>
</style>
